<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/sx.css.css">
    <link rel="stylesheet" href="../css/home.css">
    <link rel="stylesheet" href="../home-iconfont/iconfont.css">
    <script src="../api/jquery.js"></script>
    <script src="../api/api.js"></script>
    <script src="../js/slider.js"></script>
    <script src="../js/startMove.js"></script>
    <script src="../js/swiper.js"></script>
    <link rel="stylesheet" href="../css/swiper.css">
    <script src="../api/axios.js"></script>
    <script src="../api/all.js"></script>
    <style>
        header {
            background-image: url(../img/bj.png);
            width: 100%;
            background-size: 100%;
            background-repeat: no-repeat;
            z-index: 99999;
            float: left;
        }
    </style>
</head>

<body>
    <div id="home">
        <!-- 导航栏 -->
        <div class="Nav D_is D_isc">

            <div class="container D_is ">
                <div class="D_is D_isc">
                    <div class="ml_12" style="width: 70px;">
                        <i class="iconfont icon-shouye"></i><span class="navHover ml_5">天猫首页</span>
                    </div>
                    <div class="ml_12" style="width: 100px;">
                        <b>喵，欢迎来天猫</b>
                    </div>
                    <div class="ml_12" id="names">
                        <span id="pd">请登录</span>


                    </div>
                    <div class="ml_12" id="zhuce">
                        <span id="toggle">免费注册</span>
                    </div>
                </div>
                <div class="D_is D_isc">
                    <div class="ml_12 ass" style="width: 70px;">

                        <span class="hove">我的淘宝<p class="sj"></p></span>
                        <div class="bao">
                            <span>已买到的宝贝</span>
                            <span>已卖出的宝贝</span>
                        </div>
                    </div>
                    <div class="ml_12">
                        <i class="iconfont icon-gouwuchexuanzhong"></i>
                        <span>购物车</span>
                    </div>
                    <div class="ml_12 ass">
                        <span class="hove">收藏夹 <p class="sj"></p></span>
                        <div class="bao">
                            <span>收藏的宝贝</span>
                            <span>收藏的店铺</span>
                        </div>
                    </div>
                    <div class="ml_12">
                        <i class="iconfont icon-shouji"></i>
                        <span>手机版</span>
                    </div>
                    <div class="ml_12">
                        <span>淘宝网 </span>
                    </div>
                    <div class="ml_12">
                        <span>网页无障碍</span>
                    </div>
                    <div class="ml_12 ass" style="width: 70px;">
                        <span class="hove">商家支持 <p class="sj"></p></span>
                        <div class="bao">
                            <span>商家支持</span>
                            <span>天猫会员</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div id="main">
            <div class="NavigationMap contai">
                <p><img src="../img/l1.png" alt=""></p>
                <p><img src="../img/l2.png" alt=""></p>
                <p><img src="../img/l3.png" alt=""></p>
                <p><img src="../img/l4.png" alt=""></p>
                <p><img src="../img/l5.png" alt=""></p>
                <div id="content"> </div>
            </div>



        </div>
        <header>
            <img src="../img/domeLogo.png" alt="" id="imge">

            <main class="contai">
                <!-- 搜索框 -->
                <div class="logo container ">
                    <img src="../img/logo.png" alt="">
                    <input type="text" placeholder="搜索 天猫 商品/品牌/店铺" id="tex">
                    <span class="search">搜索</span>
                </div>
                <!-- 主题商城 -->
                <div class="ztsc">
                    <h2>主题商城</h2>
                    <div class="top">
                        <a href=""><img src="../img/logo1.png" alt=""></a>
                        <a href=""><img src="../img/logo2.png" alt=""></a>
                        <a href="">天猫会员</a>
                        <a href="">喵生鲜</a>
                        <a href="">医药馆</a>
                        <a href="">魅力惠</a>
                        <a href="">飞猪旅行</a>
                        <a href="">苏宁易购</a>
                        <a href="">天猫内容</a>
                    </div>
                </div>
                <div class="content" style="box-sizing:border-box ;">
                    <!-- 左边栏 -->
                    <div class="ProductTypes">
                        <div class="category">
                            <span class="iconfont icon-nvzhuang"></span>
                            <a href="">女装</a>
                            <i>/</i>
                            <a href="">内衣</a>
                        </div>
                        <div class="category">
                            <span class="iconfont icon-nanzhuang"></span>
                            <a href="">男装</a>
                            <i>/</i>
                            <a href="">运动户外</a>
                        </div>
                        <div class="category">
                            <span class="iconfont icon-xiezi"></span>
                            <a href="">女鞋</a>
                            <i>/</i>
                            <a href="">男鞋</a>
                            <i>/</i>
                            <a href="">箱包</a>
                        </div>
                        <div class="category">
                            <span class="iconfont icon-meizhuang"></span>
                            <a href="">美妆</a>
                            <i>/</i>
                            <a href="">个人护理</a>
                        </div>
                        <div class="category">
                            <span class="iconfont icon-zuanshi"></span>
                            <a href="">腕表</a>
                            <i>/</i>
                            <a href="">眼镜</a>
                            <i>/</i>
                            <a href="">珠宝饰品</a>
                        </div>
                        <div class="category">
                            <span class="iconfont icon-shouji1"></span>
                            <a href="">手机</a>
                            <i>/</i>
                            <a href="">数码</a>
                            <i>/</i>
                            <a href="">电脑办公</a>
                        </div>
                        <div class="category">
                            <span class="iconfont icon-yingerche"></span>
                            <a href="">母婴玩具</a>

                        </div>
                        <div class="category">
                            <span class="iconfont icon-miantiaomian"></span>
                            <a href="">零食</a>
                            <i>/</i>
                            <a href="">茶酒</a>
                            <i>/</i>
                            <a href="">进口食品</a>
                        </div>
                        <div class="category">
                            <span class="iconfont icon-yingtao"></span>
                            <a href="">生鲜水果</a>

                        </div>
                        <div class="category">
                            <span class="iconfont icon-xingzhuang"></span>
                            <a href="">大家电</a>
                            <i>/</i>
                            <a href="">生活电器</a>
                        </div>
                        <div class="category">
                            <span class="iconfont icon-jiajujiancai"></span>
                            <a href="">家具</a>
                            <i>/</i>
                            <a href="">灯具</a>
                            <i>/</i>
                            <a href="">卫浴</a>
                        </div>
                        <div class="category">
                            <span class="iconfont icon-qichepeijian"></span>
                            <a href="">汽车</a>
                            <i>/</i>
                            <a href="">配件</a>
                            <i>/</i>
                            <a href="">用品</a>
                        </div>
                        <div class="category">
                            <span class="iconfont icon-jiafangjiashi"></span>
                            <a href="">家纺</a>
                            <i>/</i>
                            <a href="">家饰</a>
                            <i>/</i>
                            <a href="">鲜花</a>
                        </div>
                        <div class="category">
                            <span class="iconfont icon-yiyaobaojian"></span>
                            <a href="">医药保健</a>

                        </div>
                        <div class="category">
                            <span class="iconfont icon-wan"></span>
                            <a href="">厨具</a>
                            <i>/</i>
                            <a href="">收纳</a>
                            <i>/</i>
                            <a href="">宠物</a>
                        </div>
                        <div class="category">
                            <span class="iconfont icon-luxiangtubiao"></span>
                            <a href="">图像录音</a>

                        </div>


                    </div>
                    <!-- 轮播图 -->
                    <div class="Showpictures">
                        <div class="lb" id="sliderBox">
                            <p class="sliderUl">
                                <a href=""><img src="../img/01.jpg" alt=""></a>
                                <a href=""><img src="../img/02.jpg" alt=""></a>
                                <a href=""><img src="../img/03.jpg" alt=""></a>
                                <a href=""><img src="../img/04.jpg" alt=""></a>
                                <a href=""><img src="../img/05.jpg" alt=""></a>
                                <a href=""><img src="../img/01.jpg" alt=""></a>
                            </p>
                        </div>

                        <div class="swiper mySwiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <a href=""><img src="../img/06.jpg" alt=""></a>

                                    <div class="whiteBox"></div>
                                    <a href=""><img src="../img/07.jpg" alt=""></a>
                                </div>
                                <div class="swiper-slide">
                                    <a href=""><img src="../img/08.jpg" alt=""></a>
                                    <div class="whiteBox"></div>
                                    <a href=""><img src="../img/09.jpg" alt=""></a>
                                </div>
                                <div class="swiper-slide">
                                    <a href=""><img src="../img/06.jpg" alt=""></a>

                                    <div class="whiteBox"></div>
                                    <a href=""><img src="../img/07.jpg" alt=""></a>
                                </div>
                                <div class="swiper-slide">
                                    <a href=""><img src="../img/08.jpg" alt=""></a>
                                    <div class="whiteBox"></div>
                                    <a href=""><img src="../img/09.jpg" alt=""></a>
                                </div>
                            </div>

                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                    </div>
                    <!-- 右边栏 -->
                    <div class="announcement">
                        <div class="hi">
                            <img src="../img/logo3.jpg" alt="">
                            <p>Hi! name</p>
                        </div>
                        <div class="hi1">
                            <img src="../img/10.jpg" alt="">
                        </div>
                        <div class="hi2">
                            <ul>
                                <li>
                                    <h4>公告</h4>新现实都在这里~
                                </li>
                                <li><span>热点</span>设计创亨家3D设计服务大赛来袭！</li>
                                <li><span>热点</span>全球新发现，毫无开枪就现在！</li>
                                <li><span>热点</span>万款新品流行速递抢先看</li>


                            </ul>
                        </div>
                        <div class="hi3">
                            <ul>
                                <li><span class="iconfont icon-a-wujiaoxingxingxing">
                                    </span>收藏的宝贝</li>
                                <li><span class="iconfont icon-gouwudai"></span>买过的店铺</li>
                                <li><span class="iconfont icon-dianpu"></span>收藏的店铺</li>
                                <li><span class="iconfont icon-shizhong"></span>我的足迹</li>

                            </ul>
                        </div>

                    </div>
                </div>
                <!-- 天猫超市 -->
                <div class="tmcs">

                    <img src="../img/11.jpg" alt="">


                </div>
                <div class="productCategory">
                    <ul id="oUl">
                    </ul>

                </div>
                <!-- 天猫国际 -->
                <div class="tmcs">

                    <img src="../img/31.jpg" alt="">


                </div>
                <div class="commodity">

                    <div class="peng">
                        <img src="../img/12.jpg" alt="">
                        <img src="../img/13.jpg" alt="">
                        <div class="pois">
                            <div>
                                <h4>进口<br>精选</h4>
                            </div>
                            <i></i>

                            <div class="su">
                                <h4>大牌好货</h4>
                                <h6>轻松购入</h6>
                            </div>

                        </div>
                        <div class="pois1">
                            <div>
                                <h4>直营<br>品质</h4>
                            </div>

                            <i></i>

                            <div class="su">
                                <h4>放心体验</h4>
                                <h6>畅享全球</h6>
                            </div>

                        </div>

                    </div>
                    <div class="ju">
                        <ul id="oUl1">
                        </ul>
                    </div>
                </div>
                <div class="love">
                    <div class="xi">
                        <h2>猜你喜欢</h2>
                        <span>个性推荐</span>
                    </div>
                    <div class="huan">
                        <ul id="loveList">

                            <li class="oLi">
                                <img src="../img/01.jpg" alt="">
                                <p>超威驱蚊电蚊香液无香无味5瓶1器285晚家庭家用灭蚊插电蚊香</p>
                                <span style='color:red'>158</span>

                            </li>
                        </ul>
                    </div>

                </div>
            </main>
            <img src="../img/domeLogo1.png" alt="" id="imgs">
        </header>
        <!-- 分割界面 -->
        <figure class="contai" style="margin-top:50px ;">
            <div class="box">
                <ul id="hddb">
                    <li><img src="../img/y.png" alt=""></li>
                    <li><img src="../img/q.png" alt=""></li>
                    <li><img src="../img/t.png" alt=""></li>
                    <li><img src="../img/b.png" alt=""></li>
                </ul>
            </div>

            <div class="box1">
                <div class="tox">

                    <div class="tox1">
                        <h3>购物指南</h3>
                        <ul>
                            <li>免费注册</li>
                            <li>开通支付宝</li>
                            <li>支付宝充值</li>
                        </ul>
                    </div>
                    <div class="tox1">
                        <h3>天猫保障</h3>

                        <ul>
                            <li>发票保障</li>
                            <li>售后规则</li>
                            <li>物流时效保障</li>
                        </ul>
                    </div>
                    <div class="tox1">
                        <h3>支付方式</h3>
                        <ul>
                            <li>快捷支付</li>
                            <li>信用卡</li>
                            <li>余额宝</li>
                            <li>蚂蚁花呗</li>
                        </ul>
                    </div>
                    <div class="tox1">
                        <h3>商家服务</h3>
                        <ul>
                            <li>天猫规则</li>
                            <li>商家入驻</li>
                            <li>商家中心</li>
                            <li>天猫必修课</li>丨
                            <li>喵言喵语</li>
                            <li>运营服务</li>
                        </ul>
                    </div>
                    <div class="tox1">
                        <h3>手机天猫</h3>
                        <img src="../img/e.png" alt="">
                    </div>






                </div>
            </div>
        </figure>
        <!-- 底部导航 -->
        <footer>
            <div class="bottom contai">
                <ul>
                    <li>关于天猫</li>
                    <li>商家服务大厅</li>
                    <li>开放平台</li>
                    <li>诚聘英才</li>
                    <li>联系我们</li>
                    <li>网站合作</li>
                    <li>法律声明</li>
                    <li>隐私权政策</li>
                    <li>知识产权</li>
                    <li>廉政举报</li>
                    <li>不当竞争举报</li>
                </ul>
                <ul>
                    <li>阿里巴巴集团


                    </li>
                    <li>│淘宝网</li>
                    <li>│天猫</li>
                    <li>│聚划算</li>
                    <li>│全球速卖通</li>
                    <li>│阿里巴巴国际交易市场</li>
                    <li>│1688</li>
                    <li>│阿里妈妈</li>
                    <li>│飞猪</li>
                    <li>│阿里云计算</li>
                    <li>│AIiOS</li>
                    <li>│阿里通信</li>
                    <li>│万网</li>
                    <li>│高德</li>
                    <li>│UC</li>
                    <li>│友盟</li>
                    <li>│虾米</li>
                    <li>│钉钉</li>
                    <li>│支付宝</li>
                    <li>│阿里安全</li>


                </ul>
                <img src="../img/f.png" alt="">
            </div>

        </footer>

    </div>
    <script src="../js/home.js"></script>
</body>

</html>